<template>
    <el-dialog
        title="补充资料"
        :visible.sync="dialogFormVisible"
        append-to-body
        width="60%"
    >
        <div>
            <div>
                <p class="subtitle">待补充资料</p>
                <div>
                    <el-table :data="list" border>
                        <el-table-column
                            prop="fileName"
                            label="待补充资料"
                            align="center"
                            show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column
                            prop="needGuarantor"
                            label="是否需要担保人"
                            align="center"
                            show-overflow-tooltip
                        >
                            <template v-slot="{ row }">
                                {{ row.needGuarantor | needGuarantor }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div v-if="isShowGuarantor != -1">
                <p class="subtitle">担保人信息</p>
                <div>
                    <Guarantors ref="guarantors"></Guarantors>
                </div>
            </div>
            <div>
                <p class="subtitle">上传资料</p>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="附件:" required>
                        <image-common
                            info="补充资料"
                            :limit="100"
                            :up-type="2"
                            v-model="form.files"
                            :file-type="fileType"
                            is-show-tip
                        ></image-common>
                    </el-form-item>
                    <el-form-item label="说明:">
                        <el-input
                            type="textarea"
                            v-model="form.remark"
                            maxlength="500"
                            show-word-limit
                            :rows="3"
                        ></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submitForm">补充资料</el-button>
        </div>
    </el-dialog>
</template>

<script>
import * as creditApplyApi from "@/api/letterReview/creditReviewApply";
import Guarantors from "@/views/letterReview/order/components/Guarantors.vue";
export default {
    components: { Guarantors },
    props: {},
    data() {
        // 这里存放数据
        return {
            fileType: ["png", "jpg", "jpeg", "pdf", "doc", "docx", "excel"],
            dialogFormVisible: false,
            list: [],
            form: {
                applicationNo: "",
                files: null,
                guarantors: [],
                remark: null,
            },
        };
    },
    // 计算属性 类似于 data 概念
    computed: {
        isShowGuarantor() {
            const index = this.list.findIndex(
                (item) => item.needGuarantor == 1 || item.needGuarantor == 3
            );
            return index;
        },
        needGuarantor() {
            const index = this.list.findIndex(
                (item) => item.needGuarantor == 1
            );
            return index;
        },
    },
    // 方法集合
    methods: {
        show(applicationNo) {
            this.dialogFormVisible = true;
            this.form.applicationNo = applicationNo;
            this.form.files = [];
            this.getAdditionFiles(applicationNo);
        },
        //获取待补充资料
        getAdditionFiles(applicationNo) {
            creditApplyApi.getAddFile(applicationNo).then((res) => {
                this.list = res.data;
            });
        },
        close() {
            this.dialogFormVisible = false;
        },
        submitForm() {
            if (this.needGuarantor != -1) {
                //需要担保人
                this.form.guarantors = this.$refs.guarantors.saveForm();
                if (this.form.guarantors == null) {
                    return;
                }
            }
            if (this.form.files.length > 0) {
                creditApplyApi.submitAddFile(this.form).then((res) => {
                    this.$message.success("提交补充资料成功");
                    this.$emit("success");
                    this.close();
                });
            } else {
                this.$message.error("请上传补充资料");
            }
        },
    },
    // 生命周期 - 创建完成（可以访问当前this 实例）
    created() {},
    // 生命周期 - 挂载完成（可以访问 DOM 元素）
    mounted() {},
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

.subtitle {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    &::before {
        display: inline-block;
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background-color: $primary;
        margin-right: 5px;
        position: relative;
        top: -1px;
    }
}
</style>
